<template>
  <div>
    <div :id=ids :style="{ width: '100%', height: '260px' }"></div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, toRefs } from 'vue';
import * as echarts from "echarts";

const props = defineProps({
  ids: {
    type: String,
    default: ''
  }
})
const { ids } = toRefs(props)

onMounted(() => {
  // 这里是由于图表渲染快于父元素导致图表比例溢出，做的一个延缓操作
  setTimeout(() => {
    line();
  }, 500);
});

const line = () => {
  let myChart = echarts.init(document.getElementById(`${props.ids}`) as HTMLCanvasElement);
  
  myChart.setOption(
    {
      backgroundColor:'rgba(251, 240, 239, 1)',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        show: false
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['7-27', '7-28', '7-29', '7-30', '7-31'],
          //设置轴线的属性
          axisLine:{
            lineStyle:{
              color:'#FF0000',
            }
          } 
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,  //刻度线
          },
          axisLine: {
            show: false, //隐藏y轴
          },
          axisLabel: {
            show: false, //隐藏刻度值
          },
        },
        
      ],
      series: [{
        name: '威胁值',
        type: 'bar',
        barWidth: 16,
        data: [30, 49, 26, 60, 26], //数据
        itemStyle: {
        normal: {         
          //由上到下的渐变           
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#ffb696'
          }, {
              offset: 1,
              color: '#fe7a95'
          }]),
          shadowColor: 'rgba(0, 0, 0, 0.4)',//阴影
          // 实现数字展示在柱状图
          barBorderRadius:[10, 10, 0, 0],
          label: {
            show: true,
            position: 'top',
            color:'#fe7c97'
          },
        },
       
      },
    }]
    }
  );
  window.onresize = function () {
    //自适应大小, 不用的话不会自适应大小。
    myChart.resize();
  };
};
</script>
